import React from 'react';
import ReactDOM from 'react-dom';
class ValidateTel extends React.Component {
  constructor(props) {
    super(props);
    // 事件绑定
    this.sendVerifyCode = this.sendVerifyCode.bind(this);
    this.verifyPhone = this.verifyPhone.bind(this);
  }
  // 手机验证
  verifyPhone() {
    let phone = this.refs.phone.value,
      checkCode = this.refs.checkCode.value,
      pattern = /^1[34578]\d{9}$/;
    if (phone == '' || phone.length != 11 || !pattern.test(phone) || checkCode == '') {
      alert('手机号码或验证码没有填写、错误!');
      return;
    }
    $.ajax({
      type: "GET",
      dataType: "jsonp",
      url: CBH.apiRoot + '/?g=Api&m=SendPost&a=jsonp_index',
      data: {
        checkCode: checkCode,
        phone: phone,
        uid: CBH.UserInfo.id
      },
      success: function(msg) {
        switch (msg.status) {
          case 1:
            msg = '验证成功！';
            $('#phone').val('');
            $('#checkCode').val('');
            $("#btnSendCode").text("获取验证码");
            $('.cloze').click();
            break;
          case 3:
            msg = '验证码已失效！';
            break;
          case 4:
            msg = '手机号码有误！';
            break;
          case 0:
            msg = '验证码有误!';
            break;
          default:
            msg = '验证失败!';
            break;
        }
        alert(msg);
      }
    });
  }
  // 发送验证码
  sendVerifyCode() {
    let phone = this.refs.phone.value;
    if (phone == '') {
      alert('请填写您手机号码!');
      return;
    }
    if ($('#btnSendCode').text() == '发送中...' || $('#btnSendCode').text() == '已发送!') {
      return;
    }
    $('#btnSendCode').text('发送中...');
    $.ajax({
      type: "GET",
      dataType: "jsonp",
      url: CBH.apiRoot + '/?g=Api&m=SendMessage&a=jsonp_index', //url读取的的后台文件,
      data: {
        phone: phone,
        uid: CBH.UserInfo.id
      },
      success: function(msg) {
        $('#btnSendCode').text(msg.msg);
        switch (msg.status) {
          case 1:
            msg = '验证码发送成功，有效期为半小时！';
            $('#btnSendCode').text('已发送!');
            break;
          case 2:
            msg = '验证码已发送，有效期为半小时！';
            $('#btnSendCode').text('已发送!');
            break;
          case 0:
            msg = '验证码发送失败!';
            $('#btnSendCode').text('获取验证码!');
            break;
          default:
            break;
        }
        alert(msg);
      }
    });
  }
  render() {
    return (
      <div className="validate-tel">
        <p className="tit">认证联系电话</p>
        <span className="cloze">X</span>
        <div className="validate-block">
          <p>当前联系电话 :
            <span>无</span>
          </p>
          <input type="tel" id="phone" name="phone" ref="phone" placeholder="请输入您的电话号码"/>
          <div className="validate-code">
            <input type="number" placeholder="请输入您的验证码" ref="checkCode" id="checkCode"/>
            <button id="btnSendCode" onClick={this.sendVerifyCode} name="send">获取验证码</button>
          </div>
          <button className="validate-submit btn-block" type="button" id="submit" onClick={this.verifyPhone} name="submit">确认</button>
        </div>
      </div>
    );
  }
}
export default ValidateTel
